<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <style>
        header {
          background-color: #6AB494;
            height: 40px;
            width: 100%;
        }
        .aui-icon-left{
          top: 5px;
          font-size: 20px;
        }
        .aui-border-radius {
            height: 40px;
        }
        .aui-title{
          font-size: 16px;
          top: 5px;
        }
        .aui-icon-search{
          top: 5px;
          left: 75px;
        }
        #search-input {
            top: 5px;
            font-size: 14px;
            text-align: center;
        }
        .aui-iconfont {
        }
        .aui-bar {
            height:40px;
            background-color: #6AB494;
        }

        .aui-searchbar {
            height: 40px;
        }

        .aui-searchbar-input {
            height: 30px;
        }

        .aui-iconfont {
            position: relative;
            /*font-family:"auiicon" !important;*/
            padding-top: 10px;
            font-size: 14px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>
</head>

<body>
    <!-- 头部导航 -->
    <header class="aui-bar aui-bar-nav">
        <div class="aui-pull-left aui-btn">
            <span class="aui-iconfont aui-icon-left" onclick="api.closeWin();"></span>
        </div>
        <div class="aui-title">系统消息</div>
    </header>
    <!-- 搜索框 -->
    <div class="aui-searchbar" id="search">
        <div class="aui-searchbar-input aui-border-radius">
            <i class="aui-iconfont aui-icon-search"></i>
            <input type="search" placeholder="请输入搜索内容" id="search-input">
            <div class="aui-searchbar-clear-btn">
                <i class="aui-iconfont aui-icon-close"></i>
            </div>
        </div>
        <div class="aui-searchbar-btn" tapmode>取消</div>
    </div>
</body>
<script type="text/javascript" src="script/api.js"></script>
<script type="text/javascript">
    apiready = function () {
      var uiListView = api.require("UIListView");
      uiListView.open({
          rect: {
              x: 0,
              y: 80,
              w: api.winWidth,
              h: api.frameHeight
          },
          data: [{
              imgPath: 'widget://res/image/msgIcon.png',
              title: '通知',
              subTitle: '某某某，某会议迟到，扣X分',
              remark: '5:30',
              icon: ''
          },{
            imgPath: 'widget://res/image/msgIcon.png',
            title: '通知',
            subTitle: '某某某，某会议迟到，扣X分',
            remark: '6:40',
            icon: ''
          },{
            imgPath: 'widget://res/image/msgIcon.png',
            title: '通知',
            subTitle: '某某某，某会议迟到，扣X分',
            remark: '6:20',
            icon: ''
          },{
            imgPath: 'widget://res/image/msgIcon.png',
            title: '通知',
            subTitle: '某某某，某会议迟到，扣X分',
            remark: '7:22',
            icon: ''
          },{
            imgPath: 'widget://res/image/msgIcon.png',
            title: '通知',
            subTitle: '某某某，某会议迟到，扣X分',
            remark: '12:00',
            icon: ''
          }],
          rightBtns: [{
              bgColor: '#EA2000',
              activeBgColor: '',
              width: 70,
              title: '删除',
              titleSize: 12,
              titleColor: '#fff',
              icon: '',
              iconWidth: 20
          }],
          styles: {
              borderColor: '#F0F0F0',
              item: {
                  bgColor: '#fff',
                  activeBgColor: '#F5F5F5',
                  height: 55.0,
                  imgWidth: 40,
                  imgHeight: 40,
                  imgCorner: 4,
                  placeholderImg: '',
                  titleSize: 16.0,
                  titleColor: '#AFAFAF',
                  subTitleSize: 14.0,
                  subTitleColor: '#AFAFAF',
                  remarkColor: '#AFAFAF',
                  remarkSize: 16,
                  remarkIconWidth: 30
              }
          },
          fixedOn: api.frameName
      }, function(ret, err){
          if( ret ){

          }else{
               uiListView.close();

          }
      });

    }

</script>
</html>
